import { motion, useMotionValue, useTransform } from "framer-motion";
import { useState } from "react";





const Motion = () => {
  const [data, setData] = useState([1, 2, 3, 4])
  return <div style={{
    display: 'flex',
    height: '800px',
  }}>
    <motion.div
      style={{
        width: 100,
        height: 100,
        backgroundColor: 'white',
        borderRadius: '20px',
        opacity: 0.5  // 不透明度设置为0.5
      }}
      // 以下三个属性
      // 是motion组件提供的能力
      // 实现鼠标悬浮的效果
      whileHover={{
        rotate: 45,
        scale: 1.2
      }}
      // 让元素可以随意拖拽
      drag
      // 元素放手后会自动回到起始点
      dragSnapToOrigin
    >whileHover</motion.div>
    <motion.div
      style={{
        width: 100,
        height: 100,
        backgroundColor: 'white',
        borderRadius: '20px'
      }}
      animate={
        {
          x: 0, // 向右移动100px
          y: 10, // 向下移动200px
          scale: 0.5, // 缩放至0.5倍
          rotate: 45, // 旋转45度
          opacity: 0.5  // 不透明度设置为0.5
          // 注意，你会发现使用animate这个属性进行动画设置，当页面加载的时候，该元素就发生变化了。
        }
      }>animate</motion.div>

    <motion.div
      style={
        {
          width: 100,
          height: 100,
          backgroundColor: 'white',
          borderRadius: '20px',
          opacity: 0.5, // 不透明度设置为0.5

          x: 100, // 向右移动100px
          y: 200, // 向下移动200px
          scale: 0.5, // 缩放至0.5倍
          rotate: 45, // 旋转45度
          // 我们要注意到，moiton元素的上的style属性，这个属性一般元素上也有，但是motion元素上的style属性也是被强化了的，它不仅够像一般元素一样设置各种各种的CSS相关的属性，还支持motion提供的这些为了方便元素变化增加的便捷属性。
          // 比如，我们曾在animate传入的👉x、y、scale、rotate。
          // 如果这些属性，你直接到普通元素的style中是无法识别的。如果你要在普通元素style中实现一样的效果，你就必须得通过transform属性来进行相应的设置

        }
      }
    >style</motion.div>
  </div>
}

export default Motion;